import { vw } from '@/common/dimensions';
import React, { PropsWithChildren } from 'react'
import { NativeSyntheticEvent, NativeScrollEvent, View, Text, ScrollView, StyleSheet } from 'react-native';
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';  // 导入钩子
import { useNavigation } from 'expo-router';

type Props = PropsWithChildren<{
    showTitle: boolean;
    title?: string;
    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void; // onScroll 类型定义
}>;


export default function AppPage({ showTitle, title, children, onScroll }: Props) {
    const navigation = useNavigation();
    let tabBarHeight = 0;
    try {
        tabBarHeight = useBottomTabBarHeight();  // 尝试获取 Tab Bar 高度
    } catch (error) {
       console.log("error",error);
    }

    return (
        <View style={[styles.appPageContainer , { paddingBottom:tabBarHeight * 2} ]} >
            {
                showTitle && ( <Text style={styles.title}> {title} </Text>)
            }
            <ScrollView showsVerticalScrollIndicator={false} onScroll={onScroll}>
                {children}
            </ScrollView>
        </View>
    )
}

const styles = StyleSheet.create({
    appPageContainer:{
    },
    title:{
        paddingTop:10 * vw,
        paddingLeft: 4 * vw,
        paddingBottom: 4 * vw,
        fontSize:16,
        color:"#000",
        fontWeight:'bold',
        // backgroundColor:"rgba(255,255,255,1)",
        borderBottomEndRadius:12
    }
})